<template>
  <el-pagination
    :total="_pageInfo.total"
    :page-size="_pageInfo.pageSize"
    v-model:current-page="_pageInfo.pageNum"
    background
    :page-sizes="pageSizes"
    :layout="layout"
    class="better-pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    // 分页信息，自动双向绑定的，配合.sync使用
    pageInfo: {
      pageSize: number
      pageNum: number
      total: number
    }
    layout?: string // 分页布局，同el-pagination
    defaultSize?: number
  }>(),
  {
    defaultSize: 10,
    layout: 'total, prev, sizes, pager, next, jumper'
  }
)

// 监听change事件即可
const emit = defineEmits(['update:pageInfo', 'change'])

const _pageInfo = computed({
  get() {
    return props.pageInfo
  },
  set(val) {
    emit('update:pageInfo', val)
  }
})

const pageSizes = computed(() => {
  return [props.defaultSize, 20, 50, 100]
})

const handleSizeChange = (size: number) => {
  _pageInfo.value.pageNum = 1
  _pageInfo.value.pageSize = size
  emit('change')
}

const handleCurrentChange = (num: number) => {
  _pageInfo.value.pageNum = num
  emit('change')
}
</script>

<style lang="scss">
.better-pagination {
  padding: 10px;
  justify-content: flex-end;
  .el-pagination__sizes .el-select--mini {
    width: 100px;
  }
  .el-input {
    width: 100px !important;
  }
}
</style>
